<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion"
          size="mini">添加</el-button>
        <el-input
          v-model="keyword"
          placeholder="关键词"
          class="handle-input mr10"
          size="mini"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getData"
          class="mr10"
          size="mini"
          >搜索</el-button
        >
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" size="mini" border
        @selection-change="handleSelectionChange" v-loading="loading" :height="$tableHight" >
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="mchid" label="微信商户号" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="auth_token" label="支付宝商户号" width="160" show-overflow-tooltip></el-table-column>

        <!-- <el-table-column prop="name" label="项目名称" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{ ["微信", "支付宝"][scope.row.code] }}
          </template>
</el-table-column> -->
        <el-table-column prop="proportion" label="分账比例"></el-table-column>

        <el-table-column prop="business.name" label="商户名称" width="250"></el-table-column>

        <el-table-column prop="mchid" label="电话"></el-table-column>
        <el-table-column label="logo" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.logo" class="el-icon-picture table-thumb-icon" @click="previewImage(scope.row.logo)"></i>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="二维码信息" width="150">
          <template slot-scope="scope">
            <el-collapse accordion>
              <el-collapse-item title="展开二维码" name="1">
                <div style="display: flex; flex-direction: column; align-items: center;">
                  <div style="margin-bottom: 10px; text-align: center;">
                    <p>二合一二维码</p>
                    <vue-qr ref="qrCode" :text="scope.row.qr_merge" :logoSrc="scope.row.logo" color-dark="black"
                      :callback="qrCodeCallback" width="80" height="80"></vue-qr>
                  </div>
                  <div style="text-align: center;">
                    <p>二维码</p>
                    <i v-if="scope.row.qrcode" class="el-icon-picture table-thumb-icon" @click="previewImage(scope.row.qrcode)"></i>
                    <span v-else>无</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </template>
        </el-table-column>
        <!--
        <el-table-column label="二合一二维码" align="center" width="150">
          <template slot-scope="scope">
            <vue-qr ref="qrCode" :text="scope.row.qr_merge" :logoSrc="scope.row.logo" color-dark="black"
              :callback="qrCodeCallback" width="80" height="80"></vue-qr>
          </template>
        </el-table-column>
        <el-table-column label="二维码" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.qrcode" class="el-icon-picture table-thumb-icon" @click="previewImage(scope.row.qrcode)"></i>
            <span v-else>无</span>
          </template>
        </el-table-column>
        -->

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="handleLook(scope.row)"
              >查看</el-button
            > -->
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red"
              @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange" size="mini"></el-pagination>
      </div>
    </div>

    <!-- 编辑/添加弹出框 -->
    <el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="标题"><el-input v-model="form.title" size="mini"></el-input></el-form-item>

        <el-form-item label="微信商户号"><el-input v-model="form.mchid" size="mini"></el-input></el-form-item>
        <el-form-item label="支付宝商户号"><el-input v-model="form.auth_token" size="mini"></el-input></el-form-item>

        <el-form-item label="企业名称"><el-input v-model="form.name" size="mini"></el-input></el-form-item>
        <el-form-item label="商家">
          <el-select v-model="form.business_id" placeholder="请选择商家" size="mini" class="mr10">
            <el-option v-for="(item, index) in primaryclassification" :key="item.ID" :label="item.newLable"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select v-model="form.code" placeholder="类型">
            <el-option
              v-for="item in codeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="分账比例">
          <el-input v-model="form.proportion" size="mini"></el-input>
        </el-form-item>
        <!-- <el-form-item label="登录冻结">
                    <el-switch
            v-model="form.frozen"
            active-color="#409eff"
            inactive-color="#f1f1f1"
          ></el-switch>
                  </el-form-item
        > -->
        <el-form-item label="项目logo">
          <el-upload class="avatar-uploader" :action="upload + '/'" :show-file-list="false" :data="upimg"
            :on-success="handleAvatarSuccess" :before-upload="beforeupload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveEdit" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="imagePreviewVisible" width="30%" append-to-body>
      <img :src="previewImageUrl" class="preview-image" v-if="imagePreviewVisible" />
    </el-dialog>
  </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
  name: "basetable",
  components: {
    VueQr,
  },
  data() {
    return {
      options: [
        { key: "轮播", ID: 0 },
        { key: "广告", id: 1 },
        { key: "商家轮播", id: 2 },
      ], // 下拉选项
      codeList: [
        { label: "微信", value: 0 },
        { label: "支付宝", value: 1 },
      ],
      form: {
        title: "",
        mchid: "", //微信商户号
        auth_token: "",
        name: "", //企业名称
        logo: "", //logo
        proportion: 0, //分账比例
        business_id: 0, //用户id
        code: 0,
      },
      primaryclassification: [],
      query: {
        pageIndex: 1,
        pageSize: 20,
      },
      upimg: {
        token: "",
        key: new Date().valueOf(),
      },
      // code: 0,
      upload: "",
      tableData: [],
      multipleSelection: [],
      editVisible: false,
      pageTotal: 0,
      imageUrl: "",
      keyword: "",
      type: 0,
      loading: false,
      // 图片预览相关
      imagePreviewVisible: false,
      previewImageUrl: '',
    };
  },
  created() {
    this.getToken().then(
      (res) => {
        this.upimg.token = res.data.token;
        this.url = res.data.url;
        this.upload = res.data.upload;
        console.log(res);
      },
      function () {
        console.log("请求失败处理");
      }
    );
    this.init();
  },
  methods: {
    qrCodeCallback() { },
    // 图片预览方法
    previewImage(url) {
      this.previewImageUrl = url;
      this.imagePreviewVisible = true;
    },
    init() {
      this.request("admin/businessList/", "get", {
        page: 1,
        size: 100,
        keyword: "",
      }).then((res) => {
        this.primaryclassification = res.data.data;
        console.log(this.primaryclassification);
        this.primaryclassification.forEach((item) => {
          item.newLable = item.name;
        });
        // this.first=res.data.data.length>0?res.data.data[0].ID:''
        if (res.data.data.length) {
          this.first = res.data.data[0].ID;
        }
        this.getData();
      });
    },
    // 查看
    handleLook(row) {
      const { ID } = row;
      this.$router.push({
        path: "/projectManage/account",
        query: {
          id: ID,
        },
      });
    },

    // 图片预览
    previewImage(url) {
      this.previewImageUrl = url;
      this.imagePreviewVisible = true;
    },

    // 上传图片
    handleAvatarSuccess(res, file) {
      this.form.logo = this.url + res.key;
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeupload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG、PNG 格式!");
        return false;
      }
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error("上传图标大小不能超过 1M!");
        return false;
      }
      let types = file.name.split("."); //获取图片格式
      this.upimg.key =
        "template/home/" + new Date().valueOf() + "." + types[types.length - 1];
    },
    //获取数据
    getData() {
      this.loading = true;
      this.request("admin/merchant/", "get", {
        page: this.query.pageIndex,
        size: this.query.pageSize,
        keyword: this.keyword,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        console.log(this.tableData, "xxxxx");
        this.pageTotal = res.data.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 编辑
    handleEdit(e) {
      this.editVisible = true;
      this.form = Object.assign({}, e);
      this.imageUrl = e.logo;
      console.log(e);
      this.type = 1;
    },
    cancel() {
      this.editVisible = false;
      this.form = {
        title: "",
        mchid: "", //微信商户号
        auth_token: "",
        name: "", //企业名称
        logo: "", //logo
        proportion: 0, //分账比例
        business_id: 0, //用户id
        code: 0,
      };
      this.imageUrl = "";
      this.getData();
    },
    // 修改排序
    operations(e, code) {
      console.log(e);
      e.sort = Number(e.sort);
      console.log(e);
      this.request("admin/customer/", "put", e).then((res) => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.getData();
        } else {
          this.$message.error(res.errmsg);
        }
      });
      this.editVisible = false;
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.request("admin/merchant/", "delete", { ID: row.ID }).then(
          (res) => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1);
              this.getData();
            } else {
              this.$message.error(res.errmsg);
            }
          }
        );
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.form = {
        title: "",
        mchid: "", //微信商户号
        auth_token: "",
        name: "", //企业名称
        logo: "", //logo
        proportion: 0, //分账比例
        business_id: 0, //用户id
        code: 0,
      };
      this.imageUrl = "";
      this.type = 0;
      this.editVisible = true;
    },

    // 添加/修改
    saveEdit() {
      console.log(this.form);
      this.form.proportion = Number(this.form.proportion);
      this.request(
        "admin/merchant/",
        this.type ? "put" : "post",
        this.form
      ).then((res) => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          this.form = {
            title: "",
            mchid: "", //微信商户号
            auth_token: "",
            name: "", //企业名称
            logo: "", //logo
            proportion: 0, //分账比例
            business_id: 0, //用户id
            code: 0,
          };
          this.imageUrl = "";
        } else {
          this.$message.error(res.errmsg);
        }
        this.getData();
      }).catch((err) => {
        console.error(err);
      });
      this.editVisible = false;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-thumb-icon {
  font-size: 24px;
  color: #409eff;
  cursor: pointer;
}

.preview-image {
  width: 100%;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}

/* 二维码折叠面板样式 */
::v-deep .el-collapse {
  border: none;
}

::v-deep .el-collapse-item__header {
  text-align: center;
  justify-content: center;
}

::v-deep .el-collapse-item__content {
  padding: 10px;
}

::v-deep .el-collapse-item__wrap {
  border: none;
}
</style>
